First of all, let’s see what is happening with basic JavaScript compatibility (variables, functions and basic
alert functionality) with mobile browsers. Table 1
illustrates the current levels of support on the different
platforms.Table 1. JavaScript support compatibility table
| Browser/platform | JavaScript
support |
|---|
| Safari | Yes |
| Android
browser | Yes |
| Symbian/S60 | Yes |
| Nokia Series
40 | Yes |
| webOS | Yes |
| BlackBerry | Yes from 3.8
Can be disabled by the user or the company; in that case,
noscript is
executed |
| NetFront | Yes |
| Openwave
(Myriad) | Not available in Openwave;
yes in Myriad Browser V7 |
| Internet
Explorer | Yes |
| Motorola Internet
Browser | Yes |
| Opera Mobile | Yes |
| Opera Mini | Yes, but everything after
the onload script will be
executed on the server, generating a postback |
Note:
As Openwave does not support JavaScript and Myriad 7 is not
commonly found on mobile devices today (making testing difficult),
Openwave/Myriad will be left out of the following JavaScript-related
tables.
We need to pay special attention to proxied browsers, like Opera
Mini. Remember that these browsers render our websites on their servers
and send compressed and compiled content to the clients. The clients
aren’t really browsers capable of rendering an XHTML file or JavaScript
code.
Note:
For old non-JavaScript mobile browsers or for browsers with
JavaScript disabled, we can use the noscript tag. Only those browsers will display
its content.
When we talk about mobile JavaScript, we are talking about the same
code you already know: a script tag
including some code or a script tag
with an external source. Many browsers accept the old way of defining the
script language (language="javascript"), and many of them also
accept not defining the language at all (using script alone):
<script type="text/javascript">
// Code goes here
</script>
<script src="mysource.js" type="text/javascript">
Note:
ECMAScript Mobile Profile defines two new types for the script tag, application/ecmascript and text/ecmascript, as the preferred types to use
for ESMP-compatible code. Beyond that, text/javascript is the recommendation for
XHTML MP documents and is the most compatible type to use for non-MP
browsers. My recommendation is to carry on using the well-known text/javascript.
1. Code Execution
You can execute JavaScript code in four different
ways:
A bookmarklet is a bookmark in the
browser containing some JavaScript code using a javascript: protocol URL. When the user
activates the bookmark, the JavaScript code is executed over the
current document. This allows us to execute a wide range of testing,
debugging, and other features over any web page. There are bookmarklets on the Web that are large applications,
encoded in a single line of JavaScript. One of my favorites for
desktop usage is Readability (http://lab.arc90.com/experiments/readability). The main problem with bookmarklets in mobile devices is how to
add them. In the desktop web, the main way is to drag a link with the
JavaScript code to the bookmarks area. This cannot be done in a mobile
device, though, so bookmarklets are only useful if you can manage or
synchronize them from a desktop (e.g., via iTunes for iPhone). There are a lot of bookmarklets for iPhone on the Web, including
some that will show the source code of the page inside the mobile
browser. These are only really useful for testing or debugging
purposes, though, or for “only geek” features. |
Table 2
shows which of these work with which browsers.
Table 2. Script execution compatibility table
| Browser/platform | Script | Event
handler | URL |
|---|
| Safari | Yes | Yes | Yes |
| Android
browser | Yes | Yes | Yes |
| Symbian/S60 | Yes | Yes | Yes |
| Nokia Series
40 | Yes | No before
6th edition | Yes |
| webOS | Yes | Yes | Yes |
| BlackBerry | Yes | No before
4.6 | Yes |
| NetFront | Yes | Yes | Yes |
| Internet
Explorer | Yes | Partial | Yes |
| Motorola Internet
Browser | Yes | No | Yes |
| Opera
Mobile | Yes | Yes | Yes |
| Opera Mini | Yes | No | No |
Note:
If a device is not compatible with JavaScript (different
from a device that is compatible but has JavaScript disabled), it will
show the JavaScript code to the user as text. We can avoid this
problem by inserting an HTML comment just after the script tag:
<script type="text/javascript">
<!--
// JavaScript code here
-->
</script>
